<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="a_vuejs/vue.global.js"></script>
</head>
<body>

<div id="app">
    <h3>卸载、卸载之前</h3>
    <button @click="isShow=!isShow">显示/隐藏</button>
    <coma v-if="isShow"></coma>
</div>

</body>

<script>

    const coma = {
        beforeUnmount() {
            console.log("beforeUnmount")
        },
        unmounted() {
            console.log("unmounted")
        },
        template:'<h1>这里是子组件 测试销毁之前、之后</h1>'
    }

    Vue.createApp({
        components:{
          'coma':coma
        },
        data(){
            return{
                isShow:true
            }
        },
        beforeCreate() {console.log("beforeCreate")},
        created() {console.log("created")},
        beforeMount() {console.log("beforeMount")},
        mounted() {console.log("mounted")},
        beforeUpdate() {
            console.log("beforeUpdate")
            console.log(document.getElementById('mySpan'))
        },
        updated() {
            console.log("updated")
            console.log(document.getElementById('mySpan'))
        },

        methods: {
            m1(){}
        }


    }).mount("#app")
</script>

</html>